<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>屏蔽管理</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f8f9fa;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: 3px solid;
            border-color: var(--theme-rose, #df0e62);
            border-image: none;
        }

        .header {
            background: #fff;
            color: #222;
            padding: 30px;
            text-align: center;
            border-bottom: 1px solid #e1e5e9;
        }

        .header h1 {
            font-size: 2.5rem;
            font-weight: 300;
            margin-bottom: 10px;
        }

        .header p {
            opacity: 0.9;
            font-size: 1.1rem;
        }

        .content {
            padding: 40px;
        }

        .section {
            margin-bottom: 40px;
        }

        .section-title {
            font-size: 1.8rem;
            color: #333;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid transparent;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #fb7299 0%, #df0e62 100%);
            border-radius: 2px;
        }

        .block-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

        .block-table th {
            background: linear-gradient(90deg, #fb7299 0%, #df0e62 100%);
            color: #fff;
            padding: 20px;
            text-align: left;
            font-weight: 500;
            font-size: 1.1rem;
        }

        .block-table td {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
            vertical-align: middle;
            background: linear-gradient(90deg, #fff0f6 0%, #ffe3ec 100%);
        }

        .block-table tr:hover {
            background: #f8f9ff;
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }

        .block-table tr:last-child td {
            border-bottom: none;
        }

        .block-type {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            text-align: center;
            min-width: 100px;
        }

        .block-type.type-1 {
            background: #e3f2fd;
            color: #1976d2;
        }

        .block-type.type-2 {
            background: #fff3e0;
            color: #f57c00;
        }

        .block-type.type-3 {
            background: #ffebee;
            color: #d32f2f;
        }

        .remove-btn {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        }

        .remove-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
        }

        .add-block-form {
            background: #f8f9ff;
            padding: 30px;
            border-radius: 15px;
            border: 2px solid #e3e8ff;
        }

        .form-group {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .form-group label {
            font-weight: 600;
            color: #333;
            min-width: 80px;
            font-size: 1rem;
        }

        .form-group input,
        .form-group select {
            flex: 1;
            min-width: 200px;
            padding: 12px 20px;
            border: 2px solid #e1e5e9;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: white;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .add-btn {
            background: linear-gradient(90deg, #fb7299 0%, #df0e62 100%);
            color: #fff;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(223, 14, 98, 0.18);
            margin-left: 15px;
        }

        .add-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #666;
            font-style: italic;
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: #667eea;
        }

        .error {
            text-align: center;
            padding: 20px;
            color: #d32f2f;
            background: #ffebee;
            border-radius: 10px;
            margin: 10px 0;
        }

        .success-message {
            background: #e8f5e8;
            color: #2e7d32;
            padding: 15px;
            border-radius: 10px;
            margin: 10px 0;
            border-left: 4px solid #4caf50;
        }

        .error-message {
            background: #ffebee;
            color: #d32f2f;
            padding: 15px;
            border-radius: 10px;
            margin: 10px 0;
            border-left: 4px solid #f44336;
        }

        .section, .add-block-form {
            border: 1.5px solid #e1e5e9;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            background: #fff;
        }
        .block-table {
            border: 1.5px solid #e1e5e9;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            background: #fff;
        }

        @media (max-width: 768px) {
            .container {
                margin: 10px;
                border-radius: 15px;
            }

            .content {
                padding: 20px;
            }

            .header {
                padding: 20px;
            }

            .header h1 {
                font-size: 2rem;
            }

            .block-table {
                font-size: 0.9rem;
            }

            .block-table th,
            .block-table td {
                padding: 15px 10px;
            }

            .form-group {
                flex-direction: column;
                align-items: stretch;
            }

            .form-group label {
                min-width: auto;
                margin-bottom: 5px;
            }

            .form-group input,
            .form-group select {
                min-width: auto;
            }

            .add-btn {
                margin-left: 0;
                margin-top: 10px;
                width: 100%;
            }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body>
    <input type="hidden" id="currentUserId" th:value="${session.user.userId}" />
    <div class="container fade-in">
        <div class="header">
            <h1>屏蔽管理</h1>
            <p>管理您的屏蔽列表，控制谁可以看到您的内容</p>
        </div>

        <div class="content">
            <div class="section">
                <h2 class="section-title">当前屏蔽列表</h2>
                <table class="block-table">
                    <thead>
                        <tr>
                            <th>被屏蔽用户名</th>
                            <th>屏蔽类型</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="blockList">
                        <tr>
                            <td colspan="3" class="loading">
                                <div class="pulse">正在加载屏蔽列表...</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="section">
                <h2 class="section-title">添加新屏蔽</h2>
                <div class="add-block-form">
                    <div class="form-group">
                        <label for="blockedUserName">用户名：</label>
                        <input type="text" id="blockedUserName" placeholder="请输入要屏蔽的用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="blockType">屏蔽类型：</label>
                        <select id="blockType">
                            <option value="1">不看TA - 不查看该用户的内容</option>
                            <option value="2">不让TA看我 - 该用户无法查看您的内容</option>
                            <option value="3">全部屏蔽 - 双向屏蔽</option>
                        </select>
                        <button type="button" class="add-btn" onclick="addBlock()">
                            <span>添加屏蔽</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 从隐藏字段获取用户ID
        var currentUserId = document.getElementById('currentUserId') ? document.getElementById('currentUserId').value : null;

        function showMessage(message, type = 'success') {
            const messageDiv = document.createElement('div');
            messageDiv.className = type === 'success' ? 'success-message' : 'error-message';
            messageDiv.textContent = message;
            messageDiv.style.position = 'fixed';
            messageDiv.style.top = '20px';
            messageDiv.style.right = '20px';
            messageDiv.style.zIndex = '1000';
            messageDiv.style.minWidth = '300px';
            messageDiv.style.boxShadow = '0 4px 15px rgba(0,0,0,0.1)';
            
            document.body.appendChild(messageDiv);
            
            setTimeout(() => {
                messageDiv.style.opacity = '0';
                messageDiv.style.transform = 'translateX(100%)';
                messageDiv.style.transition = 'all 0.3s ease';
                setTimeout(() => document.body.removeChild(messageDiv), 300);
            }, 3000);
        }

        function loadBlocks() {
            if (!currentUserId) {
                document.getElementById('blockList').innerHTML = '<tr><td colspan="3" class="error">请先登录后再使用屏蔽功能</td></tr>';
                return;
            }
            
            const blockList = document.getElementById('blockList');
            blockList.innerHTML = '<tr><td colspan="3" class="loading"><div class="pulse">正在加载屏蔽列表...</div></td></tr>';
            
            fetch('/api/block/' + currentUserId)
                .then(r => r.json())
                .then(list => {
                    console.log('获取到的屏蔽数据:', list);
                    let html = '';
                    if(list.length === 0) {
                        html = '<tr><td colspan="3" class="empty-state">暂无屏蔽记录</td></tr>';
                    } else {
                        for (let b of list) {
                            console.log('处理屏蔽记录:', b);
                            html += `
                                <tr class="fade-in">
                                    <td><strong>${b.blockedUserName || '未知用户'}</strong></td>
                                    <td><span class="block-type type-${b.blockType}">${blockTypeText(b.blockType)}</span></td>
                                    <td>
                                        <button class="remove-btn" onclick="removeBlock(${b.blockedUserId},${b.blockType})">
                                            移除屏蔽
                                        </button>
                                    </td>
                                </tr>`;
                        }
                    }
                    blockList.innerHTML = html;
                })
                .catch(error => {
                    console.error('加载屏蔽列表失败:', error);
                    blockList.innerHTML = '<tr><td colspan="3" class="error">加载失败，请刷新页面重试</td></tr>';
                });
        }

        function blockTypeText(type) {
            if(type==1) return '不看TA';
            if(type==2) return '不让TA看我';
            if(type==3) return '全部屏蔽';
            return '未知';
        }

        function addBlock() {
            if (!currentUserId) {
                showMessage('请先登录后再使用屏蔽功能', 'error');
                return;
            }
            
            const userName = document.getElementById('blockedUserName').value.trim();
            const blockType = document.getElementById('blockType').value;
            
            if (!userName) {
                showMessage('请输入用户名', 'error');
                return;
            }

            // 显示加载状态
            const addBtn = document.querySelector('.add-btn');
            const originalText = addBtn.innerHTML;
            addBtn.innerHTML = '<span>添加中...</span>';
            addBtn.disabled = true;

            // 先通过用户名查ID
            fetch('/api/user/searchByName?username=' + encodeURIComponent(userName))
                .then(r => r.json())
                .then(list => {
                    if(list.length === 0) {
                        showMessage('未找到该用户，请检查用户名是否正确', 'error');
                        addBtn.innerHTML = originalText;
                        addBtn.disabled = false;
                        return;
                    }
                    
                    let blockedUserId = list[0].userId;
                    let data = {
                        userId: currentUserId,
                        blockedUserId: blockedUserId,
                        blockType: blockType
                    };
                    
                    return fetch('/api/block/add', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(data)
                    });
                })
                .then(r => r.text())
                .then(result => {
                    showMessage(result, result.includes('成功') ? 'success' : 'error');
                    if (result.includes('成功')) {
                        document.getElementById('blockedUserName').value = '';
                        loadBlocks();
                    }
                })
                .catch(error => {
                    console.error('添加屏蔽失败:', error);
                    showMessage('添加屏蔽失败，请重试', 'error');
                })
                .finally(() => {
                    addBtn.innerHTML = originalText;
                    addBtn.disabled = false;
                });
        }

        function removeBlock(blockedUserId, blockType) {
            if (!currentUserId) {
                showMessage('请先登录后再使用屏蔽功能', 'error');
                return;
            }
            
            if (!confirm('确定要移除这个屏蔽吗？')) {
                return;
            }

            let data = { userId: currentUserId, blockedUserId, blockType };
            fetch('/api/block/remove', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            })
            .then(r => r.text())
            .then(result => {
                showMessage(result, result.includes('成功') ? 'success' : 'error');
                if (result.includes('成功')) {
                    loadBlocks();
                }
            })
            .catch(error => {
                console.error('移除屏蔽失败:', error);
                showMessage('移除屏蔽失败，请重试', 'error');
            });
        }

        // 页面加载完成后执行
        window.onload = function() {
            console.log('当前用户ID:', currentUserId);
            console.log('用户ID类型:', typeof currentUserId);
            
            loadBlocks();
            
            // 如果用户未登录，隐藏添加屏蔽的表单
            if (!currentUserId) {
                document.querySelector('.add-block-form').style.display = 'none';
                document.querySelector('.section-title').textContent = '当前屏蔽列表 (请先登录)';
                console.log('用户未登录，隐藏添加表单');
            } else {
                console.log('用户已登录，用户ID:', currentUserId);
            }
            
            // 添加回车键支持
            document.getElementById('blockedUserName').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    addBlock();
                }
            });
        };
    </script>
</body>
</html> 